// 基础用法
<template>
<p>Dialog 弹出一个对话框，适合需要定制性更大的场景。</p>
<p>需要设置 <code>model-value / v-model</code> 属性，它接收 <code>Boolean</code>，当为 <code>true</code> 时显示 Dialog。 Dialog 分为两个部分：<code>body</code> 和 <code>footer</code>，<code>footer</code> 需要具名为 <code>footer</code> 的 <code>slot</code>。 <code>title</code> 属性用于定义标题，它是可选的，默认值为空。 最后，本例还展示了 <code>before-close</code> 的用法。</p>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>before-close</code> 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 <code>footer</code> 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 <code>before-close</code> 的相关逻辑。</p></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>